<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="sub-module" @click.stop="selectHandle">
        <draggable-box @move="moveHandle" :class="{ module: true, active: active, default: !active }" :title="domTitle"
            :style="{ left: left, top: top, width: width, height: height, position: 'absolute', 'z-index': zindex }"
            :left="module.left" :can-move="canMove" :top="module.top">
            <text-module v-if="module.name == 'text'" :module="module" />
            <div v-else-if="module.name == 'image'"
                :style="{ 'background-image': imageUrl, 'width': '100%', 'height': '100%', 'background-size': 'cover' }">
                &nbsp;</div>
        </draggable-box>
    </div>
</template>

<script>
import DraggableBox from "./DraggableBox";
import TextModule from "./TextModule";
export default {
    components: {
        DraggableBox,
        TextModule,
    },
    data () {
        return {
            loading: false,
        };
    },
    props: {
        currentActive: { type: Object },
        fatherIndex: { type: Number },
        index: { type: Number },
        module: { type: Object },
    },

    mounted: function () { },

    computed: {
        height: function () {
            return this.module.height + "px";
        },
        width: function () {
            return this.module.width + "px";
        },
        imageUrl: function () {
            var v = this.module.url || "http://www.udeve.net/logo.png";
            return "url(" + v + ")";
        },
        zindex: function () {
            var v = this.module.zindex || 10;
            return v;
        },
        domTitle: function () {
            if (!this.active) {
                return "点击拖动";
            }
            return "";
        },
        active: function () {
            var focus = this.$store.state.pagemaker.focus;
            var index = this.$store.state.pagemaker.currentSubModuleIndex;
            if (focus == "subModule" && index == this.index) {
                return true;
            }
            return false;
        },
        canMove: function () {
            // 只有当点击后，选中该自组件，才可以移动
            return this.active;
        },
        left: function () {
            return this.module.left + "px";
        },
        top: function () {
            return this.module.top + "px";
        },
        width: function () {
            var v = this.module.width + 2;
            return v + "px";
        },
        height: function () {
            var v = this.module.height + 2;
            return v + "px";
        },
    },

    methods: {
        moveHandle: function (pos) {
            // 组件被移动
            console.log("move in sub module box", pos);
            this.$emit("move", this.index, pos);
        },
        selectHandle: function () {
            console.log("点击子组件后");
            this.$emit("select", this.fatherIndex, this.index);
        },
    },
};
</script>

<style scoped>
.module {
    border: 1px solid rgba(0, 0, 0, 0);
}

.module.active {
    border: 1px solid #1989fa;
    cursor: move;
}

.module.default {
    cursor: pointer;
}

.module:hover {
    border: 1px dashed h#1989fa;
}
</style>